<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfelo</title>
<style>
topRightToolbar, titlePanelOnBottom, leftSideBar,
titlePanel {
	display: block;
}

/*Depending on how we develop it, titlePanel may be the single styling for all of the center-screen windows */

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:-1;
}

div.topRightToolbar {
    font-family:Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
    color: white;
    width:30%;
    background: rgb(10,10,10);
    filter:alpha(opacity=90);
    right:1%;
    position:absolute;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}

div.titlePanelOnBottom {
	font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	color: white;
	width:14.5%;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	left: 2%;
	top: 80%;
	position: absolute;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
}

div.leftSideBar{
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif";
	color: white;
	font-size: 15px;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	left: 2%;
	top: 6%;
	width:14.5%;
	height:64%;
	position: absolute;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
}

div.titlePanel {
	font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	color: white;
	font-size:40px;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	width:62%;
	height:71%;
	left: 21.6%;
	top: 11.2%;
	position: absolute;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
}

ol {
	list-style-type: none;
	margin:1px 5px 10px 1px;
	text-decoration: none; 
	color: white; 
}

a{
text-decoration:none; 
color:white;
}
</style>
</head>
<body id="index" class="home">

    <div class="topRightToolbar">

        <!--Search Bar, with placeholder text "Search" -->
        <input id="searchBar" type="search" placeholder="search"/>
        
        <!-- Current User's name> -->
        <a id="CurrentUserID" href="#" >Username</a>
        <script>
            <!--Update CurrentUserID-->
        </script>

        <!--Settings icon and link-->
        <!-- Currently I don't know how to reference a local image (or maybe use an online image as reference)-->
        <a id="settings" href="external"><img src="asterisk_orange.png"/></a>
        <script>
            <!-- Makes the Settings Icon actually go somewhere-->
        </script>

    </div>

    <div class="leftSideBar">

        <!-- This figure is the profile picture -->
        <figure>
            <img src="#" alt="" />
        </figure>

        <!--The following list contain the links under the profile picture-->
        <ol>
        <li><a href="#" rel="external">Name</a></li>
        <li><a href="#" rel="external">Location</a></li>
        <li><a href="#" rel="external">Connections</a></li>
        <li><a href="#" rel="external">About</a></li>
        <li><a href="#" rel="external">Photos</a></li>
        <li><a href="#" rel="external">Message</a></li>
        <li><a href="#" rel="external">Share</a></li>
        <li><a href="#" rel="external">CurrentAlbum</a></li>
        </ol>

    </div>


    <div class="titlePanelOnBottom">

        <a href="#" rel="external">Sample Image</a>

    </div>


    <div class="titlePanel">

        <a href="#" rel="external">Sample Image</a>
        <br>
        <a href="#" rel="external">Sample Detail</a>

    </div>


</body>
</html>